import { Box, Button, TextField } from "@mui/material";
import { styled } from "@mui/material/styles";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { setWeather } from "../../redux/weatherSlice";

const CssTextField = styled(TextField)({
  "& label.Mui-focused": {
    color: "white",
  },
  "& label": {
    color: "white",
  },
  "& input": {
    width: "300px",
    color: "white",
  },
  "& .MuiInput-underline:after": {
    borderBottomColor: "#B2BAC2",
  },
  "& .MuiOutlinedInput-root": {
    "& fieldset": {
      borderColor: "#E0E3E7",
    },
    "&:hover fieldset": {
      borderColor: "#B2BAC2",
    },
    "&.Mui-focused fieldset": {
      borderColor: "#6F7E8C",
    },
  },
});

export const FormInput = () => {
  const dispatch = useDispatch();
  const [city, setCity] = useState("");

  return (
    <Box sx={{ display: "flex" }}>
      <CssTextField
        label="Город"
        id="custom-css-outlined-input"
        onChange={(event) => setCity(event.target.value)}
      />
      <Button
        variant="contained"
        onClick={() => dispatch(setWeather(city))}
        sx={{ marginLeft: "20px" }}
      >
        Найти
      </Button>
    </Box>
  );
};
